<template>
  <div>
    <v-text-field
      v-show="isShowInput"
      v-model="text"
      @blur="hiddenInput"
      class="elevation-0 gray-input"
      ref="input"
      solo
      hide-details
    ></v-text-field>
    <span @click="showInput" v-show="!isShowInput">{{ text }}</span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, ModelSync } from "vue-property-decorator";
import VTextField from "vuetify/src/components/VTextField";
@Component({
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
})
export default class EditableText extends Vue {
  @ModelSync("value", "input", { type: String }) text!: string;
  isShowInput = false;

  showInput() {
    if (this.propDisabled) return;
    type VTextFieldInstance = InstanceType<typeof VTextField>;
    this.isShowInput = true;
    this.$nextTick(() => {
      (this.$refs.input as VTextFieldInstance).focus();
    });
  }

  hiddenInput() {
    this.isShowInput = false;
  }

  get propDisabled() {
    return this.$props.disabled;
  }
}
</script>

<style lang="scss" scoped>
@import "./EditableText.scss";
</style>
